<template>
  <div>
    <el-row :gutter="30">
    <el-col :span="9">
      <collapse-transfer-grid :header="leftHeader">
        <collapse-auth-grid
          slot="grid"
          position="left"
          :data="sourceData"
          @checked-change="onSourceCheckedChange"
        ></collapse-auth-grid>
      </collapse-transfer-grid>
    </el-col>
    <el-col :span="2">
      <el-button-group class="transfer-button-group">
        <el-button
          class="transfer-button"
          type="primary"
          icon="el-icon-arrow-right"
          size="mini"
          :disabled="leftChecked.length === 0"
          @click="turnToRight"
          >批量授权</el-button
        >
        <el-button
          class="transfer-button"
          type="primary"
          icon="el-icon-arrow-left"
          size="mini"
          :disabled="rightChecked.length === 0"
          @click="turnToLeft"
          >批量取消授权</el-button
        >
        <el-button
          class="transfer-button"
          type="primary"
          size="mini"
          @click="updateAllSync"
          >批量同步更新</el-button
        >
      </el-button-group>
    </el-col>
    <el-col :span="12">
      <collapse-transfer-grid :header="rightHeader">
        <collapse-auth-grid
          slot="grid"
          position="right"
          :data="targetData"
          @checked-change="onTargetCheckedChange"
        >
        </collapse-auth-grid>
      </collapse-transfer-grid>
    </el-col>
  </el-row>
  </div>
  
</template>

<script>
import _ from "lodash";
import CollapseAuthGrid from "./CollapseAuthGrid.vue";
import CollapseTransferGrid from "./CollapseTransferGrid.vue";
export default {
  name: "CollapseTransfer",
  components: {
    CollapseTransferGrid,
    CollapseAuthGrid,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      value: [],
      leftChecked: [],
      rightChecked: [],
    };
  },
  computed: {
    leftHeader() {
      const checkedLength = this.leftChecked.length;
      const dataLength = this.sourceData.length;
      return {
        title: "待导入支行数据",
        format: `${checkedLength}/${dataLength}`,
      };
    },
    rightHeader() {
      const checkedLength = this.rightChecked.length;
      const dataLength = this.targetData.length;
      return {
        title: "已导入支行数据",
        format: `${checkedLength}/${dataLength}`,
      };
    },
    sourceData() {
      return this.data.filter((item) => {
        const finder = _.find(this.value, {'key': item['key']});
        return !finder;
      });
    },
    targetData() {
      return this.value;
    },
  },
  methods: {
    turnToRight() {
      this.data.forEach((item) => {
        if (this.leftChecked.indexOf(item.key) > -1) {
          this.value.unshift(
            Object.assign({}, item, {
              authName: "张三",
              time: _.now(),
              status: 1,
            })
          );
        }
      });
    },
    turnToLeft() {
      let removedValue = [];
      this.data.forEach((item) => {
        if (this.rightChecked.indexOf(item.key) > -1) {
          const pos = _.findIndex(this.value, {'key': item['key']})  ;
          removedValue.concat(this.value.splice(pos, 1));
        }
      });
      this.value = _.difference(this.value, removedValue)
    },
    updateAllSync() {},
    onSourceCheckedChange(val) {
      this.leftChecked = val.map((item) => item.key);
    },
    onTargetCheckedChange(val) {
      this.rightChecked = val.map((item) => item.key);
    },
  },
};
</script>
<style scoped>
.transfer-button-group {
  height: 400px;
  display: table-cell;
}
.transfer-button {
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-table /deep/ .el-button--mini {
  padding: 7px 7px;
}
</style>